import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { asyncqueryWeather } from "../actions/weatherInfo";

export default function weather() {
  const dispatch: any = useDispatch();
  const [weather, setweather] = useState([]);
  useEffect(() => {
    dispatch(asyncqueryWeather({})).then((res: any) => {
      console.log(res.data);
      setweather(res.data);
    });
  }, []);
  return (
    <>
      <div>我是天气页面 分支</div>
      <h1>来自json的数据：</h1>
      {weather.map((item: any) => {
        return (
          <div style={{ padding: "10px" }} key={item.cityId}>
            <p>城市：{item.cityName}</p>
            <p>时间：{item.sj}</p>
            <p>天气1：{item.list[0].tq1}</p>
            <p>天气2：{item.list[0].tq2}</p>
            <p>风力1：{item.list[0].fl1}</p>
            <p>风力2：{item.list[0].fl2}</p>
            <p>风向1：{item.list[0].fx1}</p>
            <p>风向2：{item.list[0].fx2}</p>
          </div>
        );
      })}
    </>
  );
}
